<template>
  <div>
    <ElForm inline>
      <ElFormItem label="请假进度" style="width: 160px;">
        <ElSelect v-model="searchForm.leaveState">
          <ElOption :label="'待提交'" :value="'toSubmit'"></ElOption>
          <ElOption :label="'待审核'" :value="'toAudit'"></ElOption>
          <ElOption :label="'已审核'" :value="'audited'"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="请假类型" style="width: 320px">
        <ElSelect v-model="searchForm.leaveTypes" :multiple="true">
          <ElOption :label="'病假'" :valuele="'病假'"></ElOption>
          <ElOption :lab="'事假'" :value="'事假'"></ElOption>
          <ElOption :label="'年假'" :value="'年假'"></ElOption>
        </ElSelect>
      </ElFormItem>

      <ElFormItem>
        <ElButton @click="queryByCondition" >Search</ElButton>
      </ElFormItem>
    </ElForm>

    <ElTable :data="pageResult.records">
      <ElTableColumn prop="leaveId" label="ID" width="160"></ElTableColumn>
      <ElTableColumn prop="actionState" label="请假进度"></ElTableColumn>
      <ElTableColumn prop="leaveType" label="请假类型"></ElTableColumn>
      <ElTableColumn prop="reason" label="请假原因" width="200"></ElTableColumn>
      <ElTableColumn prop="applier" label="申请人"></ElTableColumn>
      <ElTableColumn prop="pic" label="材料"></ElTableColumn>
      <ElTableColumn label="操作">
        <!-- 作用域插槽 -->
        <template #default="line">
          <!-- <ElButton @click="()=>{open4Edit(line)}">编辑</ElButton> -->
          <ElButton size="small" type="info" @click="open4Audit(line)"
            >审核</ElButton
          >
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="pageResult.total"
      :page-size="searchForm.pageSize"
      v-model:current-page="searchForm.pageNum"
      @current-change="queryByCondition"
    />
  </div>
</template>
<script lang="ts">
import axios from "@/api/axiosConfig";
import { defineComponent } from "vue";

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default defineComponent({
  name: "LeaveAuditor",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      searchForm: {
        leaveTypes: [],
        leaveState: 'toAudit',
        pageNum: 1,
        pageSize: 2,
      },
      pageResult: {
        total: 0,
        records: [],
      },
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition()
  },
  methods: {
    // sampleM() {},
    async queryByCondition() {
      const res = await axios({
        url: "http://localhost:8080/leaveAction/query4Auditor",
        method: "post",
        data: this.searchForm,
      });
      this.pageResult.total = res.data.total;
      this.pageResult.records = res.data.records;
    },
  },
  watch: {
    // sampleP(n, o) {},
  },
});
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
